<template lang="html">
  <div ref="container" class="container" :style="`width:${container.width}px;height:${container.height}px;`">
    <el-amap vid="myMap" :amap-manager="amapManager" :zoom="myMap.zoom" :center="myMap.center" :events="myMap.events" :plugin="myMap.plugin"></el-amap>
  </div>
</template>

<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })

  import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
  import {setting} from './MyMap'
  import { vHisTrack4Order } from "@/api/vehiclemap"
  require('echarts/theme/macarons')
  import "@/assets/vehicle_map/icon.css";
  let amapManager = new AMapManager()
  export default {
    data () {
      return {
        loading: false,
        container:{
          width:0,
          height:0,
        },
        amapManager,
        lazyAMapApiLoaderInstance,
        myMap:setting(this),
        markers:[],
        firstPath:'',
        linePath:[],//路径坐标数组
        passedPath:[],//经过路径坐标数组
        linePoints:[],//路径点信息数组
        startPoint:{},//路径起始点信息
        endPoint:{},//路径结束点信息
        currentPoint:{},//路径回放，当前点位信息
        distance:0,//路径距离
        movedDistance:0,//移动的距离
        lineLength:0,//路径点数组长度
        lineIndex:0,//路径回放，当前点位序号
        lineSpeed:100,//路径回放，当前速度
        sliderVal:0,//路径长度移动百分比
        searchForm:{
          orderCode: "6ae87948c1734b51a743a240c625847c",
        },
        activeName: 'analyze',
      }
    },
    created() {
      this.searchForm.orderCode = this.$route.query.orderCode;
    },
    mounted(){
      this.selfAdaption();
      this.getMarkPath();
      let that = this;
      window.onresize = function(){
        that.selfAdaption();
      }
    },
    methods: {
      selfAdaption(){
        this.container.width = document.documentElement.clientWidth;
        this.container.height = document.documentElement.clientHeight;
      },getMarkPath(){
        if(this.searchForm.orderCode){
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          vHisTrack4Order(this.searchForm).then(response => {
            let list = response.data;
            if(list&&list.length>0){
              this.loadLine(list);
            }else{
              this.$message({ message: '未查询到轨迹！', type: 'error' });
            }
            loading.close();
          }).catch(() => {
            loading.close();
          });
        }
      },loadLine(list){
        if(list&&list.length>0){
          this.lineLength = list.length;
          this.linePoints = list;
          let linePath = [];
          for(let i in list){
            linePath.push([list[i].longitude, list[i].latitude]);
          }
          this.addLine(this,linePath);
        }else{
          this.$message({ message: '未查询到轨迹！', type: 'error' });
        }
      },addLine(self,path){
        AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
          }
          let pathSimplifierIns = self.pathSimplifierIns?self.pathSimplifierIns:new PathSimplifier({
            zIndex: 100,
            map: self.map, //所属的地图实例
            getPath: function(pathData, pathIndex) {
              if(pathIndex&&pathIndex>-1){
                return pathData.path[pathIndex];
              }
              return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
              let point = self.linePoints[pointIndex];
              if(pointIndex>0){
                return `时间：${point.locationTime}<br/>速度：${point.speed}`;
              }
            },
            renderOptions: {
              renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
              eventSupport: true,
              pathLineStyle: {
                lineWidth: 2,
                fillStyle: null,
                strokeStyle: 'block',
                borderStyle: 'blue'
              }
            }
          });
          self.pathSimplifierIns = pathSimplifierIns;
          //设置数据
          pathSimplifierIns.setData([{
            name: '轨迹回放',
            path: path
          }]);
          //对第一条线路（即索引 0）创建一个巡航器
          var navg = pathSimplifierIns.createPathNavigator(0, {
            loop: true, //循环播放
            speed: 10000, //巡航速度，单位千米/小时
            pathNavigatorStyle: {
              width: 24,//图中小车宽度
              height: 48,//图中小车高度
              //使用图片
              content: PathSimplifier.Render.Canvas.getImageContent(require('@/assets/vehicle_map/image/truck.png')),
              strokeStyle: null,
              fillStyle: null,
              //经过路径的样式
              pathLinePassedStyle: {
                lineWidth: 4,
                strokeStyle: 'black',
                dirArrowStyle: {
                  stepSpace: 15,
                  strokeStyle: 'red'
                }
              }
            },
          });
          navg.start();
          self.markers.push(new AMap.Marker({
            map: self.map,
            position: path[0],
            icon: new AMap.Icon({
              size: new AMap.Size(32, 32),
              image: require('@/assets/vehicle_map/image/line_begin.png'),
              imageSize: new AMap.Size(32, 32)
            }),
            offset: new AMap.Pixel(-16, -32),
            autoRotation: true,
            angle:0,
          }));
          self.markers.push(new AMap.Marker({
            map: self.map,
            position: path[path.length-1],
            icon: new AMap.Icon({
              size: new AMap.Size(32, 32),
              image: require('@/assets/vehicle_map/image/line_end.png'),
              imageSize: new AMap.Size(32, 32)
            }),
            offset: new AMap.Pixel(-16, -32),
            autoRotation: true,
            angle:0,
          }));
        });
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  .container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .s-h-icon{
      position: absolute;
      border: 1px solid #c9cbc6;
      background-color: #f3f7f8;
      cursor:pointer;
      z-index: 1;
    }
    .c-left{
      float: left;
      width: 200px;
      height: 100%;
      border-right: 1px solid #C9CBC6;
      background-color: #F3F7F8;
      position: relative;
      .s-h-icon{
        right: -13px;
        top: 50%;
        margin-top: -16px;
        border-left: unset;
        height: 48px;
        padding: 16px 0px;
        border-radius: 0 10px 10px 0;
      }
      .c-left-menu{
        .el-form{
          padding:10px;
          .el-form-item{
            margin-bottom: 10px;
            .el-form-item__label {
              padding: 0;
            }
          }
        }
        .searchGroup{
          padding:10px;
        }
        .playControlGroup{
          padding:10px;
          border-top: 1px solid #c9cbc6;
          border-bottom: 1px solid #c9cbc6;
          font-weight: bold;font-size: 14px;color: #606266;
          >div{
            padding:0 0 10px 0;
            .el-radio-group{
              .el-radio{
                margin-right: 15px;
                .el-radio__label{
                  padding-left: 2px;
                }
              }
            }
            .el-button--medium.is-circle{
              padding:0px;
              >i{
                font-size: 30px;
              }
            }
          }
        }
      }
      .el-icon-caret-left:before {
        margin: 0 -1px 0 -3px;
        display: block;
      }
      .el-icon-caret-right:before {
        margin: 0 -1px 0 -3px;
        display: block;
      }
    }
    .c-right{
      float: right;
      height: 100%;
      .c-r-head{
        height: 60px;
        width: 100%;
        background-color: rgba(0,0,0,0.4);
        position: absolute;
        z-index: 0;
      }
      .c-r-main{
        width: 100%;
        background-color: #0bb2d4;
      }
      .c-r-bottom{
        width: 100%;
        height: 200px;
        position: relative;
        .s-h-icon{
          right: 50%;
          top: -12px;
          border-bottom: unset;
          width: 48px;
          padding: 0 16px;
          border-radius: 10px 10px 0 0;
        }
        .el-icon-caret-top:before {
          margin: -2px 0 -2px 0;
          display: block;
        }
        .el-icon-caret-bottom:before {
          margin: -2px 0 -2px 0;
          display: block;
        }
        .c-bottom-menu{
          border-top: 1px solid #C9CBC6;
          background-color: #F3F7F8;
          height: 100%;
          width: 100%;
          .el-tabs{
            height:100%;
            .el-tabs__header{
              margin-bottom: 0;
            }
            .el-tabs__content{
              height:200px;
              .el-tab-pane{
                height: 200px;
              }
            }
          }
        }
      }
    }
    .amap-logo{
      opacity:0;
    }
    .amap-copyright{
      opacity:0;
    }
  }
</style>
